<script setup lang="ts">
import {ref} from "vue";

// 取得画布
const myCanvas = ref<HTMLCanvasElement | null>(null);

// 拿画笔画矩形
// 其中ctx就是画笔，getContext('2d')是一个2d画笔
function drawRectangle() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      ctx.clearRect(0, 0, myCanvas.value.width, myCanvas.value.height);
      ctx.fillStyle = 'black';
      ctx.fillRect(50, 50, 100, 100);
    }
  }
}

// 1.画直线
function drawLine(start: number[], end: number[]) {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      ctx.moveTo(start[0], start[1]);
      ctx.lineTo(end[0], end[1]);
      ctx.lineWidth = 20;
      // ctx.strokeStyle = "pink";
      ctx.strokeStyle = "#ffa500";
      ctx.stroke();
    }
  }
}

// 2.画折线
type TwoDimensionalArray<T> = T[][];

function plotPolyline(points: TwoDimensionalArray<number>) {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      for (let idx = 0; idx < points.length - 1; idx++) {
        const start = points[idx];
        const end = points[idx + 1]
        console.log("start:", start)
        console.log("end:", end)
        ctx.moveTo(start[0], start[1]);
        ctx.lineTo(end[0], end[1]);
        ctx.stroke();
      }
    }
  }
}

function createLinearGradientObj() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      // 1.创建渐变
      const gradient = ctx.createLinearGradient(0, 0, 400, 400)
      // 2.从什么颜色开始渐变
      gradient.addColorStop(0, 'red');
      // 3.到什么颜色结束
      gradient.addColorStop(1, 'blue');

      // 画线
      ctx.moveTo(100, 100);
      ctx.lineTo(600, 100);
      ctx.lineWidth = 20;
      // 把渐变作为线条的颜色
      ctx.strokeStyle = gradient;
      ctx.stroke();
    }
  }
}

function createLinearGradientRec() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      // 1.创建渐变
      const gradient = ctx.createLinearGradient(200, 400, 400, 400)
      // 2.从什么颜色开始渐变
      gradient.addColorStop(0, 'red');
      // 3.到什么颜色结束
      gradient.addColorStop(1, 'blue');

      // 把渐变作为线条的颜色
      ctx.fillStyle = gradient;
      ctx.fillRect(20, 20, 600, 300);
      ctx.fillRect(20, 350, 200, 300);
    }
  }
}


function createRadioGradientRec() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      // 1.创建渐变
      const gradient = ctx.createRadialGradient(100, 100, 0, 100, 100, 100)
      // 2.从什么颜色开始渐变
      gradient.addColorStop(0, 'red');
      // 3.到什么颜色结束
      gradient.addColorStop(1, 'blue');

      // 把渐变作为线条的颜色
      ctx.fillStyle = gradient;
      ctx.fillRect(20, 20, 300, 300);
      ctx.fillRect(20, 350, 350, 350);
    }
  }
}


function ConvertDegreeToRadian(degree: number) {
  return Math.PI / 180 * degree;
}

// function ConvertRadianToDegree(radian: number) {
//   return radian * Math.PI / 180 * degree;
// }

function createConicGradientRec() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      // 1.创建渐变
      const gradient = ctx.createConicGradient(ConvertDegreeToRadian(-45), 100, 100)
      // 2.从什么颜色开始渐变
      gradient.addColorStop(0, 'red');
      gradient.addColorStop(0.5, 'green');
      // 3.到什么颜色结束
      gradient.addColorStop(1, 'red');

      // 把渐变作为线条的颜色
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 200, 200);
    }
  }
}

function createRepeatPattern() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    let image = new Image();
    image.src = "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0508%2F4bcc5393j00sd57ek001dd000tw00k7p.jpg&thumbnail=660x2147483647&quality=80&type=jpg";
    if (ctx) {
      image.onload = function () {
        const pattern = ctx.createPattern(image, 'repeat');
        if (pattern) {
          ctx.fillStyle = pattern;
          ctx.fillRect(0, 0, 800, 800);
        }

      }
    }
  }
}

function createArc() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      // 1.创建渐变
      ctx.arc(400, 400, 300, ConvertDegreeToRadian(0), ConvertDegreeToRadian(360))
      ctx.lineWidth = 20;
      // 把渐变作为线条的颜色
      ctx.stroke();
    }
  }
}

function createSmileEmoji() {
  if (myCanvas.value) {
    const ctx = myCanvas.value.getContext('2d');
    if (ctx) {
      ctx.lineWidth = 5;
      // 脸部
      ctx.arc(400, 400, 300, ConvertDegreeToRadian(0), ConvertDegreeToRadian(360));
      ctx.stroke();
      // 鼻子
      ctx.beginPath();
      ctx.arc(400, 400, 30, ConvertDegreeToRadian(0), ConvertDegreeToRadian(360));
      ctx.closePath();
      ctx.stroke();
      // 左眼
      ctx.beginPath();
      ctx.arc(250, 300, 30, ConvertDegreeToRadian(0), ConvertDegreeToRadian(360));
      ctx.closePath();
      ctx.stroke();
      // 右眼
      ctx.beginPath();
      ctx.arc(550, 300, 30, ConvertDegreeToRadian(0), ConvertDegreeToRadian(360));
      ctx.closePath();
      ctx.stroke();
      // 嘴
      ctx.beginPath();
      ctx.arc(400, 400, 250, ConvertDegreeToRadian(0), ConvertDegreeToRadian(180));
      // ctx.closePath();
      ctx.stroke();
    }
  }
}
</script>

<template>
  <div>
    <canvas ref="myCanvas" id="canvas" width="800" height="800" class="my-canvas"></canvas>
    <button @click="drawRectangle">画矩形</button>
    <button @click="drawLine([30,30],[500,500])">画直线</button>
    <button @click="plotPolyline([[30,30],[54,35],[89,355],[180,95]])">画折线</button>
    <button @click="createLinearGradientObj">线性渐变</button>
    <button @click="createLinearGradientRec">线性渐变对比</button>
    <button @click="createRadioGradientRec">径向渐变对比</button>
    <button @click="createConicGradientRec">锥形渐变对比</button>
    <button @click="createRepeatPattern">重复形状</button>
    <button @click="createArc">创建弧度</button>
    <button @click="createSmileEmoji">创建表情</button>
  </div>

</template>

<style scoped>
.my-canvas {
  border: 1px solid #d3d3d3;
}
</style>